<template>
  <div class="home-container">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20" class="statistics-row">
      <el-col
        :xs="12"
        :sm="12"
        :md="6"
        :lg="6"
        v-for="stat in statistics"
        :key="stat.id"
      >
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content" :style="{ borderColor: stat.color }">
            <div class="stat-icon" :style="{ backgroundColor: stat.color }">
              <i :class="stat.icon"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">{{ stat.title }}</div>
              <div class="stat-value">{{ stat.value }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 主要内容区域 -->
    <el-row :gutter="20" class="main-content">
      <!-- 左侧区域 -->
      <el-col :xs="24" :sm="24" :md="16" :lg="16">
        <!-- 考勤状态卡片 -->
        <el-card shadow="hover" class="status-card">
          <div class="attendance-status" :class="{ completed: timestauc }">
            <i
              :class="timestauc ? 'el-icon-check' : 'el-icon-warning'"
              class="status-icon"
            ></i>
            <div class="status-info">
              <div class="status-title">
                {{
                  timestauc ? "今日考勤已完成" : `今日考勤未完成 ${taskname}`
                }}
              </div>
              <div class="status-time">{{ getCurrentTime() }}</div>
            </div>
            <el-button
              v-if="!timestauc"
              type="primary"
              @click="clockin"
              class="clock-btn"
            >
              立即打卡
            </el-button>
          </div>
        </el-card>

        <!-- 任务列表卡片 -->
        <el-card shadow="hover" class="task-card">
          <div slot="header" class="card-header">
            <span class="header-title">最近任务</span>
            <el-button type="text">查看更多</el-button>
          </div>
          <el-table :data="recentTasks" style="width: 100%">
            <el-table-column prop="taskname" label="任务名称" min-width="120" />
            <el-table-column prop="tasktime" label="时间" min-width="160" />
            <el-table-column prop="taskaddress" label="地点" min-width="120" />
            <el-table-column label="状态" width="100" align="center">
              <template #default="{ row }">
                <el-tag :type="getTaskStatusType(row)" size="medium">
                  {{ getTaskStatusText(row) }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <!-- 右侧区域 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <!-- 快捷操作区域 -->
        <div class="quick-actions">
          <el-row :gutter="15">
            <el-col
              :xs="12"
              :sm="12"
              v-for="item in quickActions"
              :key="item.id"
            >
              <el-card
                shadow="hover"
                class="quick-card"
                @click.native="handleQuickAction(item.route)"
              >
                <div class="quick-item">
                  <i :class="item.icon" :style="{ color: item.color }"></i>
                  <div class="quick-info">
                    <div class="quick-title">{{ item.title }}</div>
                    <div class="quick-desc">{{ item.count }}</div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- 插画区域 -->
        <el-card shadow="hover" class="illustration-card">
          <div class="illustration-content">
            <img
              src="@/assets/undraw_online-collaboration_xon8.svg"
              alt="collaboration"
              class="illustration-image"
            />
            <div class="illustration-text">
              <h3>欢迎使用考勤系统</h3>
              <p>高效管理，轻松考勤</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "HomePage",
  data() {
    return {
      timestauc: false,
      statistics: [
        {
          id: 1,
          title: "本月任务",
          value: "12个",
          icon: "el-icon-s-order",
          color: "#409EFF",
        },
        {
          id: 2,
          title: "已完成任务",
          value: "8个",
          icon: "el-icon-check",
          color: "#67C23A",
        },
        {
          id: 3,
          title: "待完成任务",
          value: "4个",
          icon: "el-icon-time",
          color: "#E6A23C",
        },
        {
          id: 4,
          title: "请假申请",
          value: "2条",
          icon: "el-icon-document",
          color: "#F56C6C",
        },
      ],
      quickActions: [
        {
          id: 1,
          title: "请假申请",
          count: "填写",
          icon: "el-icon-document-add",
          color: "#409EFF",
        },
        {
          id: 2,
          title: "修改密码",
          count: "安全",
          icon: "el-icon-lock",
          color: "#67C23A",
        },
        {
          id: 3,
          title: "个人信息",
          count: "维护",
          icon: "el-icon-user",
          color: "#E6A23C",
        },
        {
          id: 4,
          title: "考勤明细",
          count: "查看",
          icon: "el-icon-date",
          color: "#F56C6C",
        },
      ],
      notices: [
        {
          id: 1,
          title: "关于五一劳动节放假安排的通知",
          time: "2024-04-25",
          type: "success",
          tag: "放假",
        },
        {
          id: 2,
          title: "4月份考勤统计已生成",
          time: "2024-04-20",
          type: "info",
          tag: "考勤",
        },
        {
          id: 3,
          title: "系统维护通知",
          time: "2024-04-18",
          type: "warning",
          tag: "系统",
        },
        {
          id: 4,
          title: "新员工入职培训安排",
          time: "2024-04-15",
          type: "primary",
          tag: "培训",
        },
      ],
      recentTasks: [
        {
          taskname: "项目需求讨论会",
          tasktime: "2024-05-10 09:30",
          taskaddress: "3楼会议室",
          status: 1,
        },
        {
          taskname: "客户演示",
          tasktime: "2024-05-12 14:00",
          taskaddress: "客户公司",
          status: 0,
        },
        {
          taskname: "团队建设活动",
          tasktime: "2024-05-15 10:00",
          taskaddress: "郊外公园",
          status: 2,
        },
      ],
      taskid: "1001",
      taskname: "项目需求讨论会",
    };
  },
  mounted() {
    // 初始化静态数据
    this.timestauc = false;
  },
  methods: {
    getCurrentTime() {
      return new Date().toLocaleString();
    },
    clockin() {
      this.$message.success("打卡成功");
      this.timestauc = true;
    },
    handleQuickAction() {},
    viewMoreNotices() {
      this.$router.push("/notices");
    },
    viewMoreTasks() {
      this.$router.push("/playertask");
    },
    getTaskStatusType(task) {
      const types = {
        0: "warning", // 未打卡
        1: "success", // 已打卡
        2: "info", // 已请假
        3: "danger", // 已过期
      };
      return types[task.status] || "info";
    },
    getTaskStatusText(task) {
      const texts = {
        0: "未打卡",
        1: "已打卡",
        2: "已请假",
        3: "已过期",
      };
      return texts[task.status] || "未知状态";
    },
  },
};
</script>

<style lang="scss" scoped>
.home-container {
  padding: 20px;
  min-height: calc(100vh - 84px);
  background-color: #f5f7fa;
  box-sizing: border-box;
}

// 统计卡片样式
.statistics-row {
  margin-bottom: 20px;

  .stat-card {
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }

  .stat-content {
    display: flex;
    align-items: center;
    padding: 15px;
    border-left: 4px solid;
  }

  .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;

    i {
      font-size: 24px;
      color: #fff;
    }
  }

  .stat-info {
    flex: 1;

    .stat-title {
      font-size: 14px;
      color: #909399;
      margin-bottom: 8px;
    }

    .stat-value {
      font-size: 22px;
      font-weight: bold;
      color: #303133;
      animation: countUp 0.8s ease-out;
    }
  }
}

// 主要内容区域样式
.main-content {
  .status-card {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
  }

  .attendance-status {
    display: flex;
    align-items: center;
    padding: 20px;
    background: linear-gradient(45deg, #fef0f0, #fff1f1);
    border-radius: 8px;

    &.completed {
      background: linear-gradient(45deg, #f0f9eb, #f4faf0);
    }

    .status-icon {
      font-size: 32px;
      margin-right: 20px;
      color: #f56c6c;

      .completed & {
        color: #67c23a;
      }
    }

    .status-info {
      flex: 1;

      .status-title {
        font-size: 18px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 8px;
      }

      .status-time {
        font-size: 14px;
        color: #909399;
      }
    }
  }

  .task-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; // 允许表格区域收缩

    .card-header {
      padding: 16px 20px;
      border-bottom: 1px solid #ebeef5;
      // flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    ::v-deep .el-table {
      .el-table__header-wrapper {
        th {
          background-color: #f5f7fa;
          padding: 14px 10px;
          font-weight: 500;
          color: #606266;
          border: none;
        }
      }

      .el-table__body-wrapper {
        max-height: calc(100vh - 450px); // 调整这个值以适应您的布局
        overflow-y: auto;
      }

      td {
        padding: 14px 10px;
        border: none;
      }

      .el-table__body {
        tr {
          height: 54px;

          &:hover > td {
            background-color: #f5f7fa;
          }
        }
      }

      .el-tag {
        border-radius: 4px;
        padding: 0 10px;
        height: 24px;
        line-height: 22px;
        font-size: 12px;
        border: 1px solid transparent;
      }
    }
  }
}

// 快捷操作区域样式
.quick-actions {
  margin-bottom: 20px;

  .quick-card {
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 10px;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }

  .quick-item {
    display: flex;
    align-items: center;
    padding: 15px;

    i {
      font-size: 24px;
      margin-right: 12px;
    }

    .quick-info {
      flex: 1;

      .quick-title {
        font-size: 15px;
        font-weight: 500;
        color: #303133;
        margin-bottom: 4px;
      }

      .quick-desc {
        font-size: 13px;
        color: #909399;
      }
    }
  }
}

// 插画卡片样式
.illustration-card {
  border-radius: 8px;
  background: linear-gradient(135deg, #f6f8fc 0%, #f0f4f9 100%);
  border: none;

  .illustration-content {
    text-align: center;
    padding: 20px;

    .illustration-image {
      width: 100%;
      max-width: 240px;
      height: auto;
      margin-bottom: 20px;
      transition: transform 0.3s ease;

      &:hover {
        transform: translateY(-5px);
      }
    }

    .illustration-text {
      h3 {
        font-size: 18px;
        color: #303133;
        margin-bottom: 8px;
        font-weight: 500;
      }

      p {
        font-size: 14px;
        color: #909399;
        margin: 0;
      }
    }
  }
}

// 动画效果
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 移动端适配样式（小于768px）
@media screen and (max-width: 767px) {
  .home-container {
    padding: 15px;
    min-height: calc(100vh - 60px); // 移动端导航栏通常更小
  }

  // 统计卡片移动端样式
  .statistics-row {
    margin: 0 -8px 15px;

    .el-col {
      padding: 0 8px;
    }

    .stat-card {
      margin-bottom: 15px;

      .stat-content {
        padding: 15px;

        .stat-icon {
          width: 40px;
          height: 40px;
          margin-right: 12px;
          border-radius: 6px;

          i {
            font-size: 18px;
          }
        }

        .stat-info {
          .stat-title {
            font-size: 13px;
            margin-bottom: 4px;
          }

          .stat-value {
            font-size: 18px;
          }
        }
      }
    }
  }

  // 主要内容区域移动端样式
  .main-content {
    margin: 0 -8px;

    .el-col {
      padding: 0 8px;
    }

    // 考勤状态卡片
    .status-card {
      margin-bottom: 15px;

      .attendance-status {
        padding: 15px;
        flex-direction: column;
        text-align: center;

        .status-icon {
          font-size: 28px;
          margin: 0 0 10px;
        }

        .status-info {
          margin-bottom: 12px;

          .status-title {
            font-size: 16px;
            margin-bottom: 5px;
          }

          .status-time {
            font-size: 13px;
            color: #909399;
          }
        }

        .clock-btn {
          width: 100%;
          margin-top: 5px;
        }
      }
    }

    // 任务列表卡片
    .task-card {
      .card-header {
        padding: 12px 15px;

        .header-title {
          font-size: 15px;
        }
      }

      ::v-deep .el-table {
        font-size: 13px;

        th {
          padding: 10px 6px;
        }

        td {
          padding: 10px 6px;
        }

        .el-tag {
          transform: scale(0.9);
          transform-origin: left center;
        }
      }
    }
  }

  // 快捷操作区域移动端样式
  .quick-actions {
    margin: 15px -8px;

    .el-row {
      margin: 0 -8px;
    }

    .el-col {
      padding: 0 8px;
      margin-bottom: 15px;
    }

    .quick-card {
      .quick-item {
        padding: 12px;

        i {
          font-size: 20px;
          margin-right: 10px;
        }

        .quick-info {
          .quick-title {
            font-size: 13px;
            margin-bottom: 2px;
          }

          .quick-desc {
            font-size: 12px;
          }
        }
      }
    }
  }

  // 插画区域移动端样式
  .illustration-card {
    margin-top: 15px;
    background: linear-gradient(135deg, #f6f8fc 0%, #f0f4f9 100%);

    .illustration-content {
      padding: 20px 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;

      .illustration-image {
        max-width: 160px;
        width: 80%;
        height: auto;
        margin-bottom: 15px;
        transition: transform 0.3s ease;

        &:hover {
          transform: translateY(-3px);
        }
      }

      .illustration-text {
        h3 {
          font-size: 16px;
          color: #303133;
          margin-bottom: 8px;
          font-weight: 500;
        }

        p {
          font-size: 13px;
          color: #909399;
          margin: 0;
          line-height: 1.4;
        }
      }
    }
  }
}

// 平板适配样式（768px-1199px）
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .home-container {
    padding: 20px;
  }

  // 统计卡片平板样式
  .statistics-row {
    margin: 0 -10px 20px;

    .el-col {
      padding: 0 10px;
    }

    .stat-card {
      margin-bottom: 20px;

      .stat-content {
        padding: 18px;

        .stat-icon {
          width: 45px;
          height: 45px;

          i {
            font-size: 20px;
          }
        }

        .stat-info {
          .stat-value {
            font-size: 20px;
          }
        }
      }
    }
  }

  // 主要内容区域平板样式
  .main-content {
    margin: 0 -10px;

    .el-col {
      padding: 0 10px;
    }

    .status-card {
      margin-bottom: 20px;

      .attendance-status {
        padding: 20px;
      }
    }

    .task-card {
      margin-bottom: 20px;
    }
  }

  // 快捷操作区域平板样式
  .quick-actions {
    margin: 0 -10px;

    .el-col {
      padding: 0 10px;
      margin-bottom: 20px;
    }

    .quick-card {
      .quick-item {
        padding: 15px;
      }
    }
  }

  // 插画区域平板样式
  .illustration-card {
    background: linear-gradient(135deg, #f6f8fc 0%, #f0f4f9 100%);
    border: none;

    .illustration-content {
      padding: 25px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 20px;

      .illustration-image {
        max-width: 200px;
        width: 45%;
        height: auto;
        margin-bottom: 0;
        transition: transform 0.3s ease;

        &:hover {
          transform: translateY(-5px);
        }
      }

      .illustration-text {
        text-align: left;
        flex: 1;
        max-width: 200px;

        h3 {
          font-size: 18px;
          color: #303133;
          margin-bottom: 10px;
          font-weight: 500;
        }

        p {
          font-size: 14px;
          color: #909399;
          margin: 0;
          line-height: 1.5;
        }
      }
    }
  }
}

// PC端适配样式
@media screen and (min-width: 1200px) {
  .home-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 30px;
    height: calc(100vh - 84px); // 减去顶部导航栏高度
    display: flex;
    flex-direction: column;
  }

  // 统计卡片PC端样式
  .statistics-row {
    margin-bottom: 20px;
    flex-shrink: 0; // 防止压缩

    .stat-card {
      margin-bottom: 0;

      .stat-content {
        padding: 20px;
        height: 90px; // 减小高度
        display: flex;
        align-items: center;

        .stat-icon {
          width: 48px;
          height: 48px;
          margin-right: 16px;
          border-radius: 8px;

          i {
            font-size: 22px;
          }
        }
      }
    }
  }

  // 主要内容区域PC端样式
  .main-content {
    flex: 1;
    min-height: 0; // 重要：允许内容区域收缩
    display: flex;
    margin: 0 -10px; // 抵消内部padding

    // 左侧区域
    .el-col {
      padding: 0 10px;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    // 状态卡片
    .status-card {
      margin-bottom: 20px;
      flex-shrink: 0;

      .attendance-status {
        padding: 24px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .status-icon {
          font-size: 28px;
          margin-right: 20px;
        }

        .clock-btn {
          min-width: 100px;
        }
      }
    }

    // 任务列表卡片
    .task-card {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0; // 允许表格区域收缩

      .card-header {
        padding: 16px 20px;
        border-bottom: 1px solid #ebeef5;
        flex-shrink: 0;
      }

      ::v-deep .el-table {
        flex: 1;
        height: 0; // 重要：允许表格自适应剩余空间

        .el-table__header-wrapper {
          th {
            background-color: #f5f7fa;
            padding: 14px 10px;
          }
        }

        .el-table__body-wrapper {
          overflow-y: auto;
        }

        td {
          padding: 14px 10px;
        }

        // 增加表格行高
        .el-table__body {
          tr {
            height: 54px;
          }
        }
      }
    }
  }

  // 右侧区域样式
  .quick-actions {
    margin-bottom: 20px;
    flex-shrink: 0;

    .quick-card {
      margin-bottom: 0;
      height: 80px;
      cursor: pointer;

      .quick-item {
        height: 100%;
        padding: 0 20px;
        display: flex;
        align-items: center;

        i {
          font-size: 22px;
          margin-right: 15px;
          transition: transform 0.3s;
        }

        &:hover i {
          transform: scale(1.1);
        }
      }
    }
  }

  // 插画区域PC端样式
  .illustration-card {
    flex: 1;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #f6f8fc 0%, #f0f4f9 100%);
    border: none;
    overflow: hidden;

    .illustration-content {
      width: 100%;
      padding: 30px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 30px;

      .illustration-image {
        max-width: 240px;
        width: 45%;
        height: auto;
        margin-bottom: 0;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-5px) scale(1.02);
        }
      }

      .illustration-text {
        text-align: left;
        flex: 1;
        max-width: 240px;

        h3 {
          font-size: 20px;
          color: #303133;
          margin-bottom: 12px;
          font-weight: 500;
          line-height: 1.4;
        }

        p {
          font-size: 15px;
          color: #909399;
          margin: 0;
          line-height: 1.6;
          opacity: 0.9;
        }
      }
    }
  }

  // 确保表格有一个最小高度
  .task-card {
    ::v-deep .el-table {
      min-height: 200px;

      .el-table__body-wrapper {
        max-height: calc(100vh - 450px);
      }

      .el-table__body {
        tr {
          height: 54px;
        }
      }
    }
  }
}

// 大屏幕适配
@media screen and (min-width: 1600px) {
  .home-container {
    max-width: 1600px;
    padding: 25px 40px;
  }

  .statistics-row {
    .stat-card .stat-content {
      height: 100px;
    }
  }

  .main-content {
    .status-card .attendance-status {
      height: 110px;
    }
  }

  .quick-actions .quick-card {
    height: 90px;
  }

  .illustration-card {
    .illustration-content {
      padding: 35px;
      gap: 40px;

      .illustration-image {
        max-width: 280px;
      }

      .illustration-text {
        max-width: 280px;

        h3 {
          font-size: 22px;
          margin-bottom: 15px;
        }

        p {
          font-size: 16px;
        }
      }
    }
  }
}
</style>
